<template>
  <!-- 歌曲列表 -->
  <div class="songListContainer" :style="{ height }">
    <!-- 标题信息 -->
    <div class="title">
      <!-- 序号 -->
      <div class="snumber">序号</div>
      <!-- 歌曲名称 -->
      <div class="songInfo">歌曲名称</div>
      <!-- 专辑 -->
      <div class="album">专辑</div>
      <!-- 时长 -->
      <div class="time">时长</div>
    </div>
    <!-- 歌曲列表 -->
    <ul v-loading="isLoading">
      <li
        v-for="(item, index) in songlist"
        :key="item.id"
        class="pointer"
        @click.stop="playSong(item.id)"
      >
        <!-- 序号 -->
        <span class="snumber floatLeft">{{ index + 1 }}.&nbsp;</span>
        <!-- 歌曲名称 -->
        <div class="songInfo floatLeft">
          <span class="songName">{{ item.name }}</span>
          <span>&nbsp;-&nbsp;</span>
          <span
            class="singers"
            v-for="(singer, index) in item.singers"
            :key="singer.id"
          >
            {{ singer.name }}
            <span v-if="index !== item.singers.length - 1">、</span>
          </span>
        </div>
        <!-- 歌曲专辑 -->
        <div class="album floatLeft">
          <span>{{ item.album }}</span>
        </div>
        <!-- 时长 -->
        <div class="time floatLeft">
          <span>{{ item.duration }}</span>
        </div>
        <!-- 操作 -->
        <div class="controls floatLeft">
          <!-- 未收藏 -->
          <like
            @click.stop="faStore.addFavorite({ ...item })"
            theme="outline"
            size="20"
            fill="#409EFF"
            class="iconfont pointer"
            title="收藏"
            v-show="!faStore.favoriteStatus({ ...item })"
          />
          <!-- 已收藏 -->
          <like
            @click.stop="faStore.addFavorite({ ...item })"
            theme="filled"
            size="20"
            fill="#f00"
            class="iconfont pointer"
            title="收藏"
            v-show="faStore.favoriteStatus({ ...item })"
          />
          <!-- 下载 -->
          <download
            theme="outline"
            size="20"
            fill="#409EFF"
            class="iconfont pointer"
            title="下载"
            @click.stop="handleDownload(item.id)"
          />
          <!-- 添加到播放列表 -->
          <plus
            theme="outline"
            size="24"
            fill="#409EFF"
            class="iconfont pointer"
            title="添加到播放列表"
            @click.stop="plStore.addSongToPlaylist(item)"
          />
        </div>
      </li>
      <!-- 没有任何歌曲 -->
      <div class="noSong" v-show="songlist.length === 0">
        <span>没有任何歌曲...</span>
      </div>
    </ul>
  </div>
</template>

<script name="SongList">
import { defineComponent, toRefs } from 'vue';
import { Like, Download, Plus } from '@icon-park/vue-next';
import { usePlaySong } from '@/hooks/usePlaySong';
import favoritesStore from '@/stores/favoritesStore';
import playlistStore from '@/stores/playlistStore';

export default defineComponent({
  name: 'SongList',
  components: { Like, Download, Plus },
  props: {
    songlist: {
      type: Array,
      default: () => [],
    },
    height: {
      type: String,
      default: '580px',
    },
    isLoading: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const { playSong, getSongUrl } = usePlaySong();
    const faStore = favoritesStore();
    const plStore = playlistStore();

    async function handleDownload(id) {
      getSongUrl(id).then((url) => {
        open(url);
      });
    }

    return {
      ...toRefs(props),
      faStore,
      plStore,
      playSong,
      handleDownload,
    };
  },
});
</script>

<style lang="scss" scoped>
// 歌曲列表
.songListContainer {
  width: 100%;

  &::-webkit-scrollbar {
    width: 5px;
  }

  // 标题信息
  .title {
    width: 95%;
    height: 30px;
    line-height: 30px;
    display: flex;
    margin: 0 auto;
    font-weight: bold;
    color: $main-color;
  }

  // 歌曲列表
  ul {
    width: 100%;
    height: calc(100% - 30px);
    padding: 0;
    margin: 10px auto;
    overflow-y: scroll;

    li {
      width: 95%;
      height: 40px;
      position: relative;
      margin: 10px auto;
      margin-bottom: 0;
      color: #666;
      padding: 0 10px;

      &:hover {
        background-color: $light-color;
      }

      .snumber,
      .album,
      .time,
      .songInfo {
        height: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        line-height: 40px;
      }

      // 操作
      .controls {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: right;

        .iconfont {
          margin-right: 10px;
        }
      }
    }

    // 没有任何歌曲
    .noSong {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #666;
    }
  }
}

.snumber {
  width: 5%;
  margin-right: 10px;
}

.songInfo {
  width: 30%;
  margin-right: 20px;
}

.album {
  width: 15%;
  margin-right: 80px;
}

.time {
  width: 5%;
  margin-right: 20px;
}

.controls {
  width: 20%;
  margin-left: 50px;
}
</style>
